<template>
<div class="home">
   <v-header></v-header>
   <div class="hede">
     <div class="hedeA">
       <div class="img">
          <img src="@/assets/images/news/GKPTA.png" alt="">
        </div>
        <div class="query">
            <div class="title">
              <h3>公告平台</h3>
              <p>Announcement platform</p>
            </div>
            <div class="search">
              <input type="text" v-model="form.name"  placeholder="请输入关键字">
              <button>
                <span class="iconfont" @click="search">查询</span>
              </button>
            </div>
        </div>
     </div>
   </div>
    
   <div class="section">
      <div class="search-result">
        <div class="result-box">
          <div class="result-list" v-for="(item, index) of searchList" :key="index">
            <div class="result-list-title" @click="newsJump(item.bidId)">[{{item.bidEdited}}榨季转运]--{{item.bidType}}-{{item.bidName}}</div>
            <div class="result-list-timer">{{item.bidEdited}}</div>
          </div>
        </div>
        <div class="search-pagination">
                <el-pagination
                  class="pagination"
                  background
                  @size-change="handleSizeChangeA"
                  @current-change="handleCurrentChangeA"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  layout="prev,pager,next"
                  :total="parinTotal">
                </el-pagination>
        </div>
      </div>
   </div>
   <v-footer class="footer"></v-footer>
</div>

</template>
<script>
import {queryBiddingStatusList} from '@/request/api'
import paginationMixin from '@/mixins/pagination'
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
import search from './Search.vue'
export default {
   mixins: [paginationMixin],
  components: {
    VHeader,
    VFooter,
    search,
  },
  data() {
    return {
      form:{
        name:''
      },
      currentPage:1,
      pageSize:10,
      parinTotal:0,
      dataTotal :40,
      dataItem:[],
      fromFather: [],
      searchList: [],
      
    }
  },
  mounted() {
    // this.refreshList()
    this.typeList()
  },
  methods: {
    // 跳转新闻详情
    newsJump(id){
     this.$router.push({name: 'router.newsDetails', params: {id}})
    },
    //搜索
    search(){
      // this.refreshList()
      this.typeList()
    },
    //列表
    getList(currentPage, pageSize, updateTotal) {
      queryBiddingStatusList({
        bidName:this.form.name,
        bidAuditstatus:'Y',
        bidBiddingstatus:'Y',
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(res => {
        this.searchList = res.data
        updateTotal(Number(res.total))
      })
    },
    typeList(){
      queryBiddingStatusList({
        bidName:this.form.name,
        bidAuditstatus:'Y',
        bidBiddingstatus:'Y',
        PageSizes:this.pageSize.toString(),
        PageIndexs: this.currentPage.toString()
      }).then(res=>{
        this.searchList = res.data
        this.parinTotal = res.total
      })
    },
    handleSizeChangeA(val){
      this.pageSize = val
      this.typeList()
    },
    handleCurrentChangeA(val){
      this.currentPage = val
      this.typeList()
    },
  },
  created() {

  }
}
</script>
<style lang="scss" scoped>
.home{
  display: flex;
  flex-direction: column;
  .hede{
    width: 100%;
   background:#F4F5F9;
   .hedeA{
     width: 80%;
     height: 380px;
      margin: 0 auto;
      position: relative;
      .img{
        width: 100%;
        height:100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .query{
        width: 100%;
        height: 60px;
        color: #fff;
        position: absolute;
        top: 85px;
        .title{
          position: absolute;
          left: 30px;
          width: 150px;
          height: 50px;
          h3{
              font-size: 27px;
              font-weight: 300;
          }
          p{
            font-size: 12px;
          }
        }
        .search{
          position: absolute;
          right: 30px;
              input{
                width: 410px;
                height: 50px;
                border-radius: 5px;
                background: #fff;
                border: none;
                outline: none;
                -webkit-box-shadow: 0 3px 15px rgba(83, 83, 83, 0.1);
                box-shadow: 0 3px 15px rgba(83, 83, 83, 0.1);
                padding-left: 30px;
                padding-right: 150px;
                font-size: 18px;
              }
              button{
                background: #DF2315;
                color: #fff;
                border: none;
                width: 70px;
                height: 52px;
                border-radius: 5px;
                position: absolute;
                top: 0px;
                right: 0;
                font-size: 20px;
                cursor: pointer;
              }
        }
      }
   }
  }
  .section {
    width: 100%;
    height: 500px;
    position: relative;
    background: #F4F5F9;
    .search-result{
      width: 76.2vw;
      background: #FFFFFF;
      padding: 0 30px 0 30px;
      position: absolute;
      left: 11.4vw;
      top: -210px;
    }
  }
  .footer{
    flex: 0 0 auto
  }
}

.search-list {
	margin: 50px 0;
  position:relative;
    .search{
    width: 968px;
    position: absolute;
    left: 50%;
    margin-left: -484px;
    bottom: -5px;
    input{
      width: 775px;
      height: 65px;
      border-radius: 5px;
      background: #fff;
      border: none;
      outline: none;
      -webkit-box-shadow: 0 3px 15px rgba(83, 83, 83, 0.1);
      box-shadow: 0 3px 15px rgba(83, 83, 83, 0.1);
      padding-left: 30px;
      padding-right: 150px;
      font-size: 18px;
      // width: 775px;
      // height: 88px;
      // border-radius: 8px;
      // background: #fff;
      // border: none;
      // outline:none;
      // box-shadow: 0 3px 15px rgba(83,83,83,.1);
      // padding-left: 30px;
      // padding-right: 150px;
      // font-size: 18px;
    }
    button{
      background: #DF2315;
      color: #fff;
      border: none;
      width: 90px;
      height: 67px;
      border-radius: 5px;
      position: absolute;
      top: 0px;
      right: 0;
      font-size: 20px;
      cursor: pointer;
      // background: #ff518b;
      // background: -moz-linear-gradient(to left,#ffa385 0,#ff518b 100%);
      // background: -webkit-linear-gradient(to left,#ffa385,#ff518b);
      // background: -o-linear-gradient(to left,#ffa385 0,#ff518b 100%);
      // background: -ms-linear-gradient(to left,#ffa385 0,#ff518b 100%);
      // background: linear-gradient(to left,#ffa385,#ff518b);
      // color: #fff;
      // border: none;
      // width: 140px;
      // height: 68px;
      // border-radius: 6px;
      // position: absolute;
      // top: 10px;
      // right: 0;
      // font-size: 20px;
      // cursor:pointer
    }
    .iconfont{
      margin-left: 10px;
      cursor:pointer
    }
  }
}
.result-box {
  margin-top: 10px;
}
.search-crumbs {
	font-size: 16px;
	color: #3D3D65;
	margin: 48px 0 38px;
}
.result-list {
  // border-bottom: 1px dotted #979797;
  padding: 16px 0 10px;
  color: #8B97A2;
  display: grid;
  grid-template-columns: 1fr 80px;
  grid-column-gap: 20px;
  align-items: center;
  // &:last-child {
  //   border-bottom: 1px dotted #979797;
  // }
  .result-list-title {
    font-size: 16px;
    // color: #3D3D65;
    color:#8B97A2;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor:pointer
  }
  .result-list-timer {
    font-size: 12px;
    line-height: 16px;
    text-align: right;
    cursor:pointer
  }
}
.search-pagination {
	display: flex;
	justify-content: center;
	margin: 62px auto 55px;
}
</style>